<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="r" uri="WEB-INF/tlds/UITagLibrary.tld"%>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Rescriptus</title>

        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"/>
        <script src="js/scriptaculous/prototype.js" type="text/javascript"/>
        <script src="js/scriptaculous/scriptaculous.js" type="text/javascript"/>
        <script src="js/MarkerManager.js" type="text/javascript"/>
        <script src="js/ContextMenu.js" type="text/javascript"/>
        <script src="js/HistoricalMap.js" type="text/javascript"/>
    </head>
    <body>
        <f:view>
            <table><tr style="vertical-align: top"><td>
                <r:historicalMap id="historicalMap" eventProviderUrl="http://localhost:8080/Rescriptus-war/EventController">
                    <table>
                        <tr>
                            <td>
                                <r:googleMap width="1000" height="600"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <r:slider value="1960" minimumValue="0" maximumValue="2010">
                                    <r:track width="1000" height="20" color="gray"/>
                                    <r:handle width="10" height="20" color="red"/>
                                </r:slider>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <r:slider value="0" minimumValue="0" maximumValue="364">
                                    <r:track width="1000" height="20" color="gray"/>
                                    <r:handle width="10" height="20" color="green"/>
                                </r:slider>
                            </td>
                        </tr>
                        <tr>
                            <td id="date" style="text-align:center">
                            </td>
                        </tr>
                    </table>
                </r:historicalMap>
            </td><td>
                <h:form id="editEventForm">
                    <h:outputLabel value="Edit event details:"/>
                    <h:panelGrid columns="2">
                        <h:outputLabel value="Id"/>
                        <h:inputText id="id" readonly="true"/>

                        <h:outputLabel value="Title"/>
                        <h:inputText id="title"/>

                        <h:outputLabel value="Description"/>
                        <h:inputTextarea id="description"/>

                        <h:outputLabel value="Type"/>
                        <h:selectOneMenu id="type">
                            <f:selectItem itemValue="Historical Event"/>
                            <f:selectItem itemValue="Battle"/>
                            <f:selectItem itemValue="Birth"/>
                            <f:selectItem itemValue="Death"/>
                        </h:selectOneMenu>

                        <h:outputLabel value="Date"/>
                        <h:inputText id="date"/>

                        <h:outputLabel value="Location"/>
                        <h:inputText id="location"/>

                        <h:outputLabel value="Added by"/>
                        <h:inputText readonly="true"/>

                        <h:outputLabel value="Last modified by"/>
                        <h:inputText readonly="true"/>
                    </h:panelGrid>
                    <input type="button" value="Insert"/>
                    <input type="button" value="Update" onclick="historicalMap.updateEventEnd()"/>
                </h:form>
            </td></tr></table>
        </f:view>
    </body>
</html>
